<%@ page contentType="text/html; charset=utf-8" language="java" %>
<%@ include file="/sys/include/header.jsp" %>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<title>创建报销</title>
<style type="text/css">
body{
	margin:10px;  
	font-size:0.9em;
}
a{
	color:#F00;
}
.STYLE1 {color: #FF0000}
</style>
<!-- extjs -->
<link rel="stylesheet" type="text/css" href="sys/extjs/css/ext-all.css">
<script type="text/javascript" src="sys/extjs/js/ext-base.js"></script>
<script type="text/javascript" src="sys/extjs/js/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="sys/extjs/css/tables-example.css">	
<link href="sys/style01/css/table.css" rel="stylesheet" type="text/css" /> 
<link rel="stylesheet" href="sys/style01/css/tab-view.css" type="text/css" media="screen">
<link href="sys/style01/date/css/banzu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="sys/style01/date/include/js/calendar.js"></script>
<script type="text/javascript" src="sys/style01/date/include/js/checkdate.js"></script>
<script type="text/javascript" src="sys/style01/date/include/js/calendar-zh.js"></script>
<script type="text/javascript" src="sys/style01/date/include/js/calendar-setup.js"></script>
<script type="text/javascript" src="sys/js/include/common.js"></script>
<SCRIPT src="sys/js/include/Calendar2.js"></SCRIPT>
</head>
<script type="text/javascript"> 
	
	function save(){
		if(!checkPageValid()){
			return;
		}
		var table = document.getElementById("chailvfei_detail");
		
		var tableTr = table.getElementsByTagName("tr");
		
		for(var i = 1; i < tableTr.length - 1; ++i){
			var baoxiaoClass = tableTr[i].getElementsByTagName("select")[0];
			if(baoxiaoClass.value == ""){
				alert("差旅明细第" + i + "行的报销类型未填写");
				return;
			}

			if(baoxiaoClass.value == "交通" || baoxiaoClass.value == "餐补"){
				var baoxiaoKind = tableTr[i].getElementsByTagName("select")[1];
				if(baoxiaoKind.value == ""){
					alert("差旅明细第" + i + "行的报销种类未填写");
					return;
				}
			}
			if(baoxiaoClass.value == '住宿'){
				var startTime = tableTr[i].getElementsByTagName("input")[2];
				var endTime = tableTr[i].getElementsByTagName("input")[3];
				if(!IsValidDate(startTime.value) || startTime.value == ''){
					alert("差旅明细第" + i + "行开始时间格式错误或未填写\n正确格式为 yyyy-mm-dd");
					return;
				}
				if(!IsValidDate(endTime.value) || endTime.value == ''){
					alert("差旅明细第" + i + "行结束时间格式错误或未填写\n正确格式为 yyyy-mm-dd");
					return;
				}
				if(endTime.value < startTime.value){
					alert("差旅明细第" + i + "行开始时间不能大于结束时间！");
					return;
				}
			}
			var fee = tableTr[i].getElementsByTagName("input")[4];
			if(fee.value == "" || !validate(fee.value)){
				alert("差旅明细第" + i + "行费用格式错误或未填写");
				return;
			}
		}
		
			var hasupload = document.frames['hidden_frame'].hasupload();
			if(hasupload == 'true'){
				document.form1.fileName.value = document.form2.file.value;
			}else document.form1.fileName.value = "";

		if(confirm("确认提交么？")){
			document.form1.action = "hr/createBaoxiaoDo.action";
			document.form1.submit();
		}
    }

	
	var trIndex = "0"; 
	
	function addChailvTr(){
		trIndex++;
		
		var otr = document.getElementById("tbCody").getElementsByTagName("tr")[0].cloneNode(true);
		var tdIndex = otr.getElementsByTagName("td");

		//0
		var td0 = tdIndex[0].getElementsByTagName("input");
		
		for(var i=0;i<td0.length;i++){
			if(td0[i].type=="checkbox") continue;
			if(td0[i].name=="tdIndex") 
				td0[i].value=trIndex;
		}
		//1
		//var td1 = tdIndex[1].getElementsByTagName("select");
		//td1[0].name=td1[0].name+trIndex;
		//td1[0].id=td1[0].id+trIndex;
		//2
		//var td2 = tdIndex[2].getElementsByTagName("select");
		//td2[0].name=td2[0].name+trIndex;
		//td2[0].id=td2[0].id+trIndex;
		//var td22 = tdIndex[2].getElementsByTagName("input");
		//for(var i=0;i<td22.length;i++){
		//	td22[i].name=td22[i].name+trIndex;
		//	td22[i].id=td22[i].id+trIndex;
	//	}
		
		//3
		//var td3 = tdIndex[2].getElementsByTagName("input");
		//td3[0].name=td3[0].name+trIndex;
		//td3[0].id=td3[0].id+trIndex;
		
		var chailvfei_detail_table = document.getElementById("chailvfei_detail");
		var table_tr = chailvfei_detail_table.getElementsByTagName("tr");
		table_tr[table_tr.length - 1].insertAdjacentElement("beforeBegin", otr);
	}

	function deleteChecked(){
		var chk = document.getElementsByName("chktd");
		var bool = true;
		for(var j =0;j<chk.length-1;j++){
			if(chk[j].checked){
				bool =false;
				deleteTr(chk[j]);
				j--;
			}	
		}	
		if(bool){
			alert("请选择需要删除的差旅明细！");
		}
	}

	function deleteTr(obj){	
		var oDelTr = obj.parentNode.parentNode;
		oDelTr.parentNode.deleteRow(oDelTr.rowIndex);
		computTotal(document.form1.za_fee);
	}

	var typeNow;
	function selectClass(select, type){
		typeNow = type;
		if(type == 'class'){
			var oTr = select.parentNode.parentNode;
			var kindselect = oTr.getElementsByTagName("select")[1];
			var divs = oTr.getElementsByTagName("div");
			if(select.options[select.selectedIndex].value == '交通'){
				divs[0].style.display = "";
				divs[1].style.display = "none";
				divs[2].style.display = "none";
				kindselect.innerHTML="";
				kindselect.options[0]=new Option("请选择","");
				kindselect.options[1]=new Option("汽车","汽车");
				kindselect.options[2]=new Option("火车","火车");
				kindselect.options[3]=new Option("飞机","飞机");
			}
			if(select.options[select.selectedIndex].value == '住宿'){
				divs[0].style.display = "none";
				divs[1].style.display = "";
				divs[2].style.display = "none";
			}
			if(select.options[select.selectedIndex].value == '餐补'){
				divs[0].style.display = "";
				divs[1].style.display = "none";
				divs[2].style.display = "none";
				kindselect.innerHTML="";
				kindselect.options[0]=new Option("请选择","");
				kindselect.options[1]=new Option("早餐","早餐");
				kindselect.options[2]=new Option("中餐","中餐");
				kindselect.options[3]=new Option("晚餐","晚餐");
			}
		}
	}

	function computTotal(obj){
		if(!validate(obj.value)){
			alert("数字格式错误！");
			obj.value = '0';
		}
		var tongxun_fee = document.form1.tongxun_fee.value;
		if(tongxun_fee == '') tongxun_fee = '0';
		var za_fee = document.form1.za_fee.value;
		if(za_fee == '') za_fee = '0';
		var computer_fee = document.form1.computer_fee.value;
		if(computer_fee == '') computer_fee = '0';
		var lastMouth_fee = document.form1.lastMouth_fee.value;
		if(lastMouth_fee == '') lastMouth_fee = '0';
		var kuaidi_fee = document.form1.kuaidi_fee.value;
		if(kuaidi_fee == '') kuaidi_fee = '0';
		var zafee = ( parseFloat(tongxun_fee) + parseFloat(za_fee) + parseFloat(computer_fee) + parseFloat(lastMouth_fee) + parseFloat(kuaidi_fee) );
		
		var chailv = document.getElementsByName("fee");
		var chailv_fee = '0';
		for(var i = 0; i < chailv.length - 1; ++i){
			var one_chailv = chailv[i].value;
			if(one_chailv == '') one_chailv = '0';
			chailv_fee = parseFloat(chailv_fee) + parseFloat(one_chailv);
		}
		document.form1.chailv_heji.value = chailv_fee;
		document.form1.heji.value = parseFloat(chailv_fee) + parseFloat(zafee);
	}

	function upload(){
		var file = document.form2.file.value;
		if(file == ""){
			alert("请先选择文件！");
			return;
		}
	  	document.form2.action="hr/createBaoxiaoDo.baoxiaoupload";
	  	document.form2.submit(); 
		
	}
</script>
<body class="ridgeBody">
<table align="center" width="100%"><tr><td align="center">
<form name="form1" method="post" action="hr/createBaoxiaoDo.action" >
<input name="fileName"  type="hidden" class="input"  value ="" readonly/>	
<input name="jsp_url"  type="hidden" class="input"  value ="hr/createBaoxiao.action" readonly/>

	<table class=datatable width="100%" cellpadding='0' cellspacing='0' border='1' bordercolordark='white' bordercolorlight='#BEBEBE'>
	    <tr>
	        <td height="25" colspan="4" valign="top" class="dataTitle"><br>创建报销信息</td>
	    </tr>	  
	    <tr>   
        <td height="22" nowrap="nowrap" class="datatr1"><span class="STYLE1">*</span>CTM姓名：</td>
        	<td height="22" >
        		<input name="ctm_code"  type="hidden" class="input"  value ="${baoxiaoBean.ctm_code }" readonly/>
        		<input name="ctm_name"  type="text" class="input" value ="${baoxiaoBean.ctm_name }"  readonly/>
        	</td>      
        	<td height="22" nowrap="nowrap" class="datatr1"><span class="STYLE1">*</span>城市：</td>
        	<td height="22" >
        		<input name="city_code"  type="hidden" class="input"  value ="${baoxiaoBean.city_code }" readonly/>
        		<input name="city_value"  type="text" class="input"  value ="${baoxiaoBean.city_value }" readonly/>
        	</td>
      </tr>
      <tr>     
      <td height="22" nowrap="nowrap" class="datatr1"><span class="STYLE1">*</span>日期：</td>
        <td height="22" >
        	<input name="baoxiao_date"  type="text" class="input"  value ="${baoxiaoBean.baoxiao_time }" readonly/>
        </td>   
        <td height="22" nowrap="nowrap" class="datatr1"><span class="STYLE1">*</span>RTM：</td>
        <td height="22" >
        	<input name="rtm_code"  type="hidden" class="input" value ="${baoxiaoBean.rtm_code }" readonly/>
        	<input name="rtm_name"  type="text" class="input" value ="${baoxiaoBean.rtm_name }" readonly/>
        </td>        
      </tr> 
</table>

<fieldset align='center' style="width:100%">
 <legend><font  size="2">报销明细</legend>

<table class=datatable width="100%" cellpadding='0' cellspacing='0' border='1' bordercolordark='white' bordercolorlight='#BEBEBE'> 
		<tr>
			<td height="22" colspan="4" valign="top" class="dataTitle"><br>常规报销：</td>
		</tr>
	    <tr>   
        	<td height="22" nowrap="nowrap" class="datatr1" width="10%">通讯费(元)：</td>
        	<td height="22" width="10%">
        		<input name="tongxun_fee"  type="text" class="input"  onChange="computTotal(this)" checkType = "number"/>
        	</td>  
      </tr>
      <tr>
			<td height="22"  colspan="4" valign="top" class="dataTitle" width="10%">杂费报销：</td>
		</tr>
       <tr>   
        	<td height="22" nowrap="nowrap" class="datatr1" >杂费(元)：</td>
        	<td height="22" >
        		<input name="za_fee"  type="text" class="input"   onChange="computTotal(this)" checkType = "number"/>
        	</td>  
        	<td height="22" nowrap="nowrap" class="datatr1" >备注：</td>
        	<td height="22" colspan="1" width="70%">
        		<input name="za_beizhu"  type="text" class="input" style="width:100%" maxlength="200"/>
        	</td>    
      </tr>
      <tr>
      <td height="22" nowrap="nowrap" class="datatr1" width="10%">电脑补助(元)：</td>
        	<td height="22" width="10%">
        		<input name="computer_fee"  type="text" class="input"  onChange="computTotal(this)" checkType = "number"/>
        	</td>  
        	<td height="22" nowrap="nowrap" class="datatr1" width="10%">备注：</td>
        	<td height="22" width="70%">
        		<input name="computer_beizhu"  type="text" class="input" style="width:100%"/>
        	</td>     
      </tr>
      <tr>
      		<td height="22" nowrap="nowrap" class="datatr1" width="10%">快递费(元)：</td>
        	<td height="22" width="10%">
        		<input name="kuaidi_fee"  type="text" class="input"  onChange="computTotal(this)" checkType = "number"/>
        	</td>    
      		<td height="22" nowrap="nowrap" class="datatr1" width="10%">备注：</td>
        	<td height="22" width="70%">
        		<input name="kuaidi_beizhu"  type="text" class="input" style="width:100%"/>
        	</td>    
      			
      </tr>
      <tr>
      		<td height="22" nowrap="nowrap" class="datatr1" width="10%">补上月报销费(元)：</td>
        	<td height="22" width="10%">
        		<input name="lastMouth_fee"  type="text" class="input"  onChange="computTotal(this)" checkType = "number"  />
        	</td>  
        	<td height="22" nowrap="nowrap" class="datatr1" width="10%">备注：</td>
        	<td height="22" width="70%">
        		<input name="lastMouth_beizhu"  type="text" class="input" style="width:100%"/>
        	</td>    
      </tr>
      

	<table  width="100%" bgcolor="#96BDDA">
	<tr>
	<td height="25" colspan="6" valign="top" class="dataTitle"><br>差旅费明细</td>
	<td height="25" colspan="1" valign="top" class="dataTitle">
	<input type="button"  onClick="addChailvTr()" value="增加一行">&nbsp;&nbsp;&nbsp;
	<input type="button"  onClick="deleteChecked()" value="删除">
	</td>
	</tr>

<table id="chailvfei_detail" width="100%" cellpadding='0' cellspacing='0' border='1' bordercolorDark='white' bordercolorLight='#BEBEBE' class="datatable">
	<tr>
		<td height="22" nowrap class="dataTitle" align="center">&nbsp;选择&nbsp;</td>
		<td height="22" nowrap class="dataTitle" align="center">&nbsp;报销类别&nbsp;</td>
		<td height="22" nowrap class="dataTitle" align="center">&nbsp;报销种类&nbsp;</td>
		<td height="22" nowrap class="dataTitle" align="center">&nbsp;费用(元)&nbsp;</td>
	</tr>
	<tr></tr>
</table>
  </table>

</table>

<table class=datatable width="100%" cellpadding='0' cellspacing='0' border='1' bordercolordark='white' bordercolorlight='#BEBEBE'>
		<tr>
		<td height="20"  nowrap="nowrap" class="datatr1"><br>差旅费合计：</td>
		<td height="20">
		<input type="text"  name="chailv_heji" readonly>
		</td>
		<td height="20"  nowrap="nowrap" class="datatr1"><br>合计：</td>
		<td height="20" >
		<input type="text"  name="heji" readonly>
		</td>
		</tr>
	</table>
</form>
</table>

<table class=datatable width="100%" cellpadding='0' cellspacing='0' border='1' bordercolordark='white' bordercolorlight='#BEBEBE'>
	<form action="" id="form2" name="form2" encType="multipart/form-data" method="post" target="hidden_frame" >
		<tr>	
		<td height="25"  nowrap="nowrap" class="datatr1"><br>添加附件(文件必须小于4M)：</td>
		<td valign="top" nowrap class="tabimputright" height="22">
		<input name="file" type="file" class="text" />
		<input type="button"  onClick="upload()" value="上传文件">
		<iframe height="25" scrolling="no" src= "jsp/hr/baoxiao/baoxiaoupload.jsp" name='hidden_frame' id="hidden_frame" style='display:'></iframe> 
		</td>

		

		<tr>
		<td height="20" colspan="6" valign="top" class="dataTitle">
		<input type="button"  onClick="save()" value="提交">
		</td>
		</tr>

		<input name="ctm_code1"  type="hidden" class="input"  value ="${baoxiaoBean.ctm_code }" readonly/>
		<input name="fileName"  type="hidden" class="input"  value ="" readonly/>	
		<input name="baoxiao_date1"  type="hidden" class="input"  value ="${baoxiaoBean.baoxiao_time }" readonly/>
	</form>  
</table>


<div  style="display:none">
<table id="tbCody" align="center">
			<tr>
				<td  height="20"  align="center" style="width:40px;" rowspan="1" >
					<input id="tdIndex" name="tdIndex" value="" type="hidden">
					<input name="chktd" id="chktd"  type="checkbox"  style="width:20px;" />
	  			</td>
	  			<td align="center">
	  				<select class="selectwidth" name="smallClass" value="" onChange="selectClass(this,'class')"  >
					<option value="" selected>请选择</option>
					<c:forEach items="${classList}" var="class">
						<option value="${class}">${class}</option>	
					</c:forEach>
					</select>
	  			</td>
	  			<td align="center"  border='1'>
	  				<div  style="display:none">
	  				<select class="selectwidth" name="baoxiaokind" value="" onChange=""  >
					<option value="" selected>请选择</option>
					</select>
					</div>
					<div  style="display:none">
					<input name="starttime" type="text" class="text"  value=""  onclick="setday(this)" readonly/>~
					<input name="endtime" type="text" class="text"   value=""  onclick="setday(this)" readonly/>
					</div>
					<div style="display:">
					&nbsp;
					</div>
	  			</td>
	  			<td align="center">
	  				<input  name="fee" value=""   onChange="computTotal(this)" type="text">
	  			</td>
  			</tr>	
	</table>
</div>

</body>
</html> 

